<template>
    <div class="manipulation">
       <div class="manipulationDiv">
           <el-row>
               <el-col :span="4">
                   <diySelect
                           :optionData="optionData"
                           size="medium"
                           :propsValue="selectValue"
                           @choose="choose">
                   </diySelect>
               </el-col>
               <el-col :span="3">
                   <el-button type="primary" size="medium" @click="backUpFun">数据备份</el-button>
               </el-col>
               <el-col :span="3">
                   <el-button type="primary" size="medium" @click="restoreFun">数据还原</el-button>
               </el-col>
           </el-row>
           <el-dialog
                   title="提示信息"
                   :visible.sync="centerDialogVisible"
                   width="30%"
                   :close-on-click-modal = 'false'
                   center>
               <span>{{backUpMessage}}{{backUpValue}}？</span>
<!--               <input type="file" v-show="inputShow">-->
               <span slot="footer" class="dialog-footer">
                   <el-button @click="centerDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="backUpConfirm" v-show="!inputShow">确 定</el-button>
                   <el-button type="primary" @click="restoreConfirm" v-show="inputShow">确 定</el-button>
               </span>
           </el-dialog>
       </div>
    </div>
</template>

<script>
    import diySelect from '../../components/publicCom/diySelect'
    import {mapActions} from 'vuex'
    export default {
        name: "dataManipulationPage",
        components:{diySelect},
        data(){
            return{
                selectValue:'',
                selectName:'',
                optionData:[],
                centerDialogVisible:false,
                selectMessage:'',
                inputShow:false,
                operation: {userName:this.$store.state.user.userName, operationDate:'', operationMessage:''},
            }
        },
        computed:{
            backUpValue(){
                return this.selectName
            },
            backUpMessage(){
                return this.selectMessage
            },
        },
        methods:{
            ...mapActions(['userOperation','addDataMan','getDataMan','getDataManType']),
            choose(val){
                this.selectValue = val   //获取选项值
                if(this.selectValue === 'arrange'){
                    this.selectName = '排班表'
                }else if(this.selectValue === 'attendance'){
                    this.selectName = '出勤表'
                }else if(this.selectValue === 'check'){
                    this.selectName = '账单表'
                }else if(this.selectValue === 'data_backup'){
                    this.selectName = '备份信息表'
                }else if(this.selectValue === 'depot_goods'){
                    this.selectName = '库存消耗表'
                }else if(this.selectValue === 'dining_order_detail'){
                    this.selectName = '下单明细表'
                }else if(this.selectValue === 'dining_order_main'){
                    this.selectName = '下单主表'
                }else if(this.selectValue === 'dishes_appendix'){
                    this.selectName = '菜品图片表'
                }else if(this.selectValue === 'dishes_classify'){
                    this.selectName = '菜单分类表'
                }else if(this.selectValue === 'dishes_detail'){
                    this.selectName = '菜单明细表'
                }else if(this.selectValue === 'dishes_main'){
                    this.selectName = '菜单表'
                }else if(this.selectValue === 'goods_type'){
                    this.selectName = '消耗品分类表'
                }else if(this.selectValue === 'job'){
                    this.selectName = '职位表'
                }else if(this.selectValue === 'log'){
                    this.selectName = '日志表'
                }else if(this.selectValue === 'member'){
                    this.selectName = '会员管理信息表'
                }else if(this.selectValue === 'pay_price'){
                    this.selectName = '支出表'
                }else if(this.selectValue === 'permission'){
                    this.selectName = '功能菜单表'
                }else if(this.selectValue === 'role_per'){
                    this.selectName = '角色权限表'
                }else if(this.selectValue === 'role_permi'){
                    this.selectName = '系统角色表'
                }else if(this.selectValue === 'seats'){
                    this.selectName = '餐桌信息表'
                }else if(this.selectValue === 'staff'){
                    this.selectName = '员工表'
                }else if(this.selectValue === 'store'){
                    this.selectName = '部门表'
                }else if(this.selectValue === 'supplier'){
                    this.selectName = '供应商表'
                }else if(this.selectValue === 'user'){
                    this.selectName = '会员表'
                }else if(this.selectValue === 'wage'){
                    this.selectName = '工资表'
                }
            },
            backUpFun(){
                if(this.selectValue === ''){
                    this.$message.error('请选择备份信息！')
                }else {
                    this.centerDialogVisible = true
                    this.selectMessage = '是否备份'
                }
            },
            restoreFun(){
                if(this.selectValue === ''){
                    this.$message.error('请选择备份信息！')
                }else {
                    this.centerDialogVisible = true
                    this.selectMessage = '是否导入'
                    this.inputShow = true
                }
            },
            backUpConfirm(){
                let obj = {
                    tableName:this.selectValue
                }
                this.getDataMan(obj)//备份数据，发起请求
                    .then(resp=>{
                        if(resp.Status === 'success'){
                            this.$message.success({message: '备份成功！'})
                            this.operation.operationMessage = '备份' + this.selectName
                            this.operation.operationDate = this.$store.state.nowTime.time
                            this.userOperation(this.operation)
                        }else {
                            this.$message.error({message: '备份失败！'})
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                this.centerDialogVisible = false
            },
            restoreConfirm(){
                //console.log(document.getElementById('file').files)
                // let file = document.querySelector('[type=file]')
                // let formData = new FormData()
                // formData.append('upload',file.files[0])
                // if(file.files[0] === undefined){
                //     alert('请选择文件夹！')
                // }else {
                //
                // }
                //console.log(formData.get('upload'))
                let obj = {
                    tableName:this.selectValue
                }
                this.addDataMan(obj)//导入数据，发起请求
                    .then(resp=>{
                        console.log(resp)
                        if(resp.status === '还原成功'){
                            this.$message.success({message: '还原成功！'})
                            this.operation.operationMessage = '还原' + this.selectName
                            this.operation.operationDate = this.$store.state.nowTime.time
                            this.userOperation(this.operation)
                        }else{
                            this.$message.error({message: '还原失败！'})
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                this.centerDialogVisible = false
            },
        },
        mounted() {
            this.getDataManType().then(resp=>{
                let list = []
                let name = ''
                for (let value of resp.tableList) {
                    list.push(value.tableName)
                }
                for (let value of list) {
                    if(value === 'arrange'){
                        name = '排班表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'attendance'){
                        name = '出勤表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'check'){
                        name = '账单表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'data_backup'){
                        name = '备份信息表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'depot_goods'){
                        name = '库存消耗表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'dining_order_detail'){
                        name = '下单明细表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'dining_order_main'){
                        name = '下单主表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'dishes_appendix'){
                        name = '菜品图片表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'dishes_classify'){
                        name = '菜单分类表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'dishes_detail'){
                        name = '菜单明细表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'dishes_main'){
                        name = '菜单表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'goods_type'){
                        name = '消耗品分类表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'job'){
                        name = '职位表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'log'){
                        name = '日志表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'member'){
                        name = '会员管理信息表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'pay_price'){
                        name = '支出表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'permission'){
                        name = '功能菜单表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'role_per'){
                        name = '角色权限表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'role_permi'){
                        name = '系统角色表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'seats'){
                        name = '餐桌信息表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'staff'){
                        name = '员工表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'store'){
                        name = '部门表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'supplier'){
                        name = '供应商表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'user'){
                        name = '会员表'
                        this.optionData.push({value:value, label:name})
                    }else if(value === 'wage'){
                        name = '工资表'
                        this.optionData.push({value:value, label:name})
                    }
                }
            })
        }
    }
</script>

<style scoped lang="less">
.manipulationDiv{
    margin-top: 20px;
    .el-col{
        text-align: center;
    }
    .el-dialog{
        span{
            display: inline-block;
            text-align: center;
            width: 100%;
        }
        input{
            display: inline-block;
            margin:10px auto;
        }
    }
}
</style>